import { Icon, Rate } from "antd";
import { Button, List, TextareaItem, Toast, WhiteSpace } from 'antd-mobile';
import { addon } from "pao-aop";
import { BaseReactElement, BaseReactElementControl, BaseReactElementState, reactControl } from "pao-aop-client";
import React from "react";
import { request, setMainFormTitle } from "src/business/util_tool";
import { AppServiceUtility } from "src/projects/app/appService";

const Item = List.Item;
const Brief = Item.Brief;

/**
 * 组件：评论状态
 */
export interface CommentViewState extends BaseReactElementState {
    did_service?: any[];
    // 评论内容
    // 态度
    service_attitude?: any;
    // 质量
    service_quality?: any;
    // 内容
    opinion_remarks?: any;
    // 是否已发送
    isSend?: boolean;
    // 是否已评论
    isComment?: boolean;
}
/**
 * 组件：评论
 * 评论
 */
export class CommentView extends BaseReactElement<CommentViewControl, CommentViewState> {
    constructor(props: any) {
        super(props);
        this.state = {
            did_service: [],
            service_attitude: '',
            service_quality: '',
            opinion_remarks: '',
            isSend: false,
            isComment: undefined,
        };
    }
    componentDidMount() {
        let id = this.props.match!.params.key;
        AppServiceUtility.my_order_service.my_order_list!({ 'id': id })!
            .then((data) => {
                this.setState({
                    did_service: data.result,
                    isComment: data.result && data.result.length > 0 && data.result[0]['comment_info'].length > 0 ? true : false,
                });
            })
            .catch((err) => {
                console.info(err);
            });
    }
    // 服务内容评价
    changeValue = (e: any, inputName: any) => {
        this.setState({
            [inputName]: e
        });
    }
    // 提交评论啦
    commentSubmit() {
        const { did_service, isSend, opinion_remarks, service_attitude, service_quality } = this.state;
        if (isSend === true) {
            Toast.info('请勿重复提交！');
            return;
        }
        if (did_service!.length < 1 || !did_service![0]['id'] || !did_service![0]['origin_product'] || !did_service![0]['origin_product']['product_id']) {
            Toast.info('数据出错，请刷新重试！');
            return;
        }
        if (service_attitude === '') {
            Toast.info('请对服务态度评价！');
            return;
        }
        if (service_quality === '') {
            Toast.info('请对服务质量评价！');
            return;
        }
        this.setState(
            {
                isSend: true,
            },
            () => {
                // 由于后端会循环，所以这里传一个数组对象
                request(this, AppServiceUtility.service_operation_service.add_service_order_comment!([{
                    opinion_remarks,
                    service_attitude: service_attitude,
                    service_quality: service_quality,
                    order_id: did_service![0]['id'],
                    product_id: did_service![0]['origin_product']['product_id'],
                }]))
                    .then((data: any) => {
                        if (data === 'Success') {
                            Toast.success('发布评价成功！', 3, () => {
                                window.location.reload();
                            });
                        } else {
                            this.setState(
                                {
                                    isSend: false,
                                },
                                () => {
                                    Toast.fail(data);
                                }
                            );
                        }
                    }).catch((e) => {
                        this.setState({
                            isSend: false,
                        });
                        console.error(e);
                    });
            }
        );
    }
    render() {
        const did_service = this.state.did_service!;
        const isComment = this.state.isComment;
        setMainFormTitle("发表评价");
        return (
            <div>
                <List>
                    <WhiteSpace size="lg" />
                    <Item>{did_service.length > 0 ? did_service[0].orgnization_name[0] : ''}</Item>
                    <Item thumb={<span>服务项目</span>}><Brief>{did_service.length > 0 && did_service[0].origin_product && did_service[0].origin_product['product_name'] ? did_service[0].origin_product['product_name'] : ''}</Brief></Item>
                    <Item thumb={<span>服务态度</span>}><Rate character={<Icon type="heart" theme="filled" />} onChange={(e) => this.changeValue(e, 'service_attitude')} allowHalf={true} value={isComment ? did_service[0]['comment_info'][0]['service_attitude'] + 0 : ''} /></Item>
                    <Item thumb={<span>服务质量</span>}><Rate character={<Icon type="heart" theme="filled" />} onChange={(e) => this.changeValue(e, 'service_quality')} allowHalf={true} value={isComment ? did_service[0]['comment_info'][0]['service_quality'] + 0 : ''} /></Item>
                    {(() => {
                        if (isComment === true) {
                            return (
                                <Item thumb={<span>评价意见</span>}><Brief>{did_service[0]['comment_info'][0]['opinion_remarks']}</Brief></Item>
                            );
                        } else if (isComment === false) {
                            return (
                                <TextareaItem
                                    rows={5}
                                    placeholder='您对这次服务满意吗？'
                                    onChange={(e) => this.changeValue(e, 'opinion_remarks')}
                                />
                            );
                        }
                        return null;
                    })()}
                    <WhiteSpace />
                    <WhiteSpace />
                    <WhiteSpace />
                    <WhiteSpace />
                    {(() => {
                        if (isComment === true) {
                            return (
                                <Button type='primary' disabled={true}>已评价</Button>
                            );
                        } else if (isComment === false) {
                            return (
                                <Button type='warning' onClick={() => this.commentSubmit()}>发布</Button>
                            );
                        }
                        return null;
                    })()}
                </List>
            </div>
        );
    }
}

/**
 * 控件：评论控制器
 * 评论
 */
@addon('CommentView', '评论', '评论')
@reactControl(CommentView, true)
export class CommentViewControl extends BaseReactElementControl {
    constructor() {
        super();
    }
}